import React, { useState, useContext } from 'react';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';

import { Context } from '../../reducer';

const Index = () => {
    const navigate = useNavigate()
    const [state, dispatch] = useContext(Context);
    const [city, setCity] = useState([])
    const getCityHttp = () => {
        axios.get(`http://121.37.198.213:7000/city`).then(res => {
            setCity(res.data.res[0].hotCities)
        })
    }
    React.useEffect(() => {
        getCityHttp()
    }, [])
    const cityBtn = city.map(item => {
        return (
            <button key={item.id} onClick={() => {
                dispatch({ type: 'chooseCity', city: item })
                navigate(-1)
            }}>{item.name}</button>
        )
    })
    return (
        <div>
            city
            <hr />
            {cityBtn}
        </div>
    );
}

export default Index;
